Advanced CSS3 and HTML5

Introduction

The famed British physicist Stephen Hawking wrote a book called A Brief History of Time. Time is a big subject to cover in one book. This lesson won't be quite that ambitious, but we're going to cover a lot of material in a compressed way. We'll quickly review and reinforce your basic and intermediate HTML and CSS skills before we dive into advanced techniques.

You probably have some experience with HTML5 and CSS3, but I figure a bit of review won't hurt. If you don't have much experience with these topics, you'll use this lesson as a crash course. If you are experienced, you'll analyze my approach, compare it to your own, and we'll both learn from the exchange of perspectives.

What I Mean by "Basic" Techniques

We'll range beyond basic HTML and CSS in this class. But here's a list of what I consider some basic techniques.

HTML5:

• Creating a basic HTML5 file
• Defining a head and body section of your HTML page
• Structuring your page with div tags
• Defining basic HTML tags for headings, paragraphs, lists, and links
• Styling tags with a linked, external style sheet

CSS3:

• Creating a CSS file
• Defining CSS styles for tags like headings, paragraphs, lists, and links
• Defining ID and class styles for div tags
• Implementing page designs with floated div tags
• Defining styles that apply to multiple tags
• Defining styles that apply to tags only when those tags are embedded in other tags

We'll review and build on your knowledge of those techniques in the rest of this lesson.

Let's not waste any time! Head over to Chapter 2, where I'll walk you through setting up and managing a serious, advanced website.

Setting Up Your Website

I know you're eager to start working with HTML and CSS files. But first we need to do a little prep work—because when you create your files, you'll need a place to put them. Also, we have to make sure you're working with a legitimate, dedicated code editor.

Organizing a Website Folder

The first step is to create a root folder for your website. This is a folder (also a directory) in which all your site content is stored. If you plan to work through this lesson step-by-step, I strongly suggest you create a folder on your desktop named "class" and store all your website files there.

Why save all your files in the same folder? Later in this course, I'll walk you through the process of contracting for a remote Web host site. The Web hosting company will sign you up with a domain name and provide you with all the information you need to log into a control center. But to get your site uploaded, you'll need to have all your files in the same folder.

As you create and work with HTML and CSS files, you'll save them to this folder with a filename that has no uppercase characters, no spaces, and no special characters (like !, ?, or @).

If you're comfortable creating a folder on your desktop and naming it "class," you can skip ahead to the next section, Installing a Code Editor. If you need help creating that folder, here's how to do it:

• In Windows, open Windows Explorer by choosing Start > All Programs > Accessories > Windows Explorer. Once Explorer is open, choose File > New > Folder. In Windows 7, click the New Folder button in Windows Explorer. In Windows 8, tap or click the Home tab, and then tap or click New Folder. Or you can right-click on the desktop, choose New from the context menu, and then click Folder. The folder has the name "New Folder" by default, but you can just type "class" and press ENTER to replace that.
• On a Mac, go to the Finder window and choose File > New Folder.

Installing a Code Editor

Now you need a reliable code editor. Do not use a text editor, like Word, or Google Docs, or Windows Notepad! Text editors will corrupt HTML and CSS code with things like smart quotes instead of regular straight quotes.

If you already have a favorite code editor installed, stick with it. If you don't, my recommendations are:

• Notepad++ for Windows
• TextWrangler for Mac, available from BareBones software

I've put more information about code editors in the Supplementary Material for this lesson. The two I've listed here aren't the most sophisticated code editors, but they're reliable, free, and easier to get comfortable with than more complex options. Unless you're devoted to another code editor, I suggest using one of these.

Creating and Saving an HTML5 File

You're ready to explore our template. Copy this HTML into your code editor:

<!--The HTML5 doctype declaration is very simple-->
<!DOCTYPE HTML>
<!--All page content is inside the HTML element-->
<html>
<!--Head element content is not visible in a browser window-->
<head>
<!--The UTF-8 character set provides the most support for all symbols and characters-->
<meta charset="UTF-8">
<title>HTML Template</title>
<!‐- The following line links to our style sheet file-->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<!--Content visible in the browser's window is inside the HTML element-->
<body>
<!--All our content is enclosed in the wrapper ID style-->
<div id="wrapper">
<!--The banner ID style is inside the wrapper ID style-->
	<div id="banner">
		<h1>Website for [your class nickname]</h1>
	</div>
<!--left-column ID style is floated left and used for navigation-->
	<div id="left-column">
		<h3>Links...</h3>
		<ul>
		<li> <a href="http://www.w3schools.com/">Reference: W3Schools</a></li>
		<li> <a href="feedback.html">Feedback Form</a></li>
		<li> <a href="video.html">Video</a></li>
		</ul>
<!--right-column ID style is floated right and used for content-->
	</div>
	<div id="right-column">
		<h2>Right Column Heading Here </h2>
		<p>Right column content here </p>
			<div class="box"><p>Box content</p></div>
			<div class="box"><p>Box content</p></div>
			<div class="box"><p>Box content</p></div>
			<div class="box"><p>Box content</p></div>
			<div class="box"><p>Box content</p></div>
			<div class="box"><p>Box content</p></div>
	</div>
<!--The clear class style clears (removes) float-->
	<div class="clear"></div>
	<div id="footer">
		<h5>Site by [your class nickname]</h5>
	</div>
</div>
</body>
</html>

We'll walk through this HTML5 code and connect it with a CSS3 style sheet shortly. But let me provide you with what they call a "spoiler" in the movie business. When you connect this code with a style sheet, it'll look like this:

Previewing your HTML page

Before we break down how this page works, save your own version of it. With the code copied into your text editor, choose File > Save. Navigate to your site folder, and save the file as index.html. If your code editor has an option for encoding, choose Unicode (UTF-8).

Saving a file as index.html

In Chapter 3, we'll talk about the different parts of this Web page.

Deconstructing an HTML5 Web Page

Let's focus on some important components of a basic Web page. First, note that the HTML includes many comments. The code for a comment is:

<!—this is a comment-->

Next, note that we're using the HTML5 document type (doctype) declaration to tell browsers that this is an HTML file. HTML5 has this doctype declaration:

<!DOCTYPE HTML>

Other doctype declarations are for older versions of HTML, and not all browsers support every new element in HTML5. So should we be using an HTML5 doctype declaration? Yes. Not all browsers support new HTML5 elements, but that doesn't matter when it comes to a doctype declaration. Every browser can interpret the <!DOCTYPE HTML> tag and "learn" that this is an HTML page.

Examining Head and Body Elements

Okay, "head and body elements" sounds as if it belongs in a course for premed students. But no, relax, you're in the right class.

The terms "head" and "body" are based on those parts of the human body. Like all HTML pages, our template has a <head> element and a <body> element. As you'd expect, the <head> element goes at the top.

Let me reproduce the <head> element here, so you don't have to click back to Chapter 2.

<!--The HTML5 doctype declaration is very simple->
<!DOCTYPE HTML>
<!--All page content is inside the HTML element-->
<html>
<!--Head element content is not visible in a browser window-->
<head>
<!--The UTF-8 character set provides the most support for all symbols and characters-->
<meta charset="UTF-8">
<title>HTML Template</title>
<!—The following line links to our style sheet file-->
<link rel="stylesheet" type="text/css" href="style.css">
</head>

A meta tag is a label that defines everything in the document. The head element includes the charset meta tag, which in this case defines the character set (the full list of available letters, numbers, and symbols) as UTF-8, which all browsers support.

The head element also includes the title element. The <title> tag defines the page title, which appears in a browser's title bar or tab bar. For example, the title of the Internet Movie Database website is "IMDb - Movies, TV and Celebrities."

Website title

And the code for that title is:

<title>IMDb - Movies, TV and Celebrities</title>

Before we move past the <head> element, note the link to the file that will be the CSS style sheet for our page. We'll talk more about CSS and about style sheets in this lesson and in later lessons; for now, I just want you to notice the location.

Let's move on from the head to the body. Again, I'll show it here, so you don't have to go back to Chapter 2.

<!--Content visible in the browser's window is inside the HTML element-->
<body>
<!--All our content is enclosed in the wrapper ID style-->
<div id="wrapper">
<!--The banner ID style is inside the wrapper ID style-->
	<div id="banner">
		<h1>Website for [your class nickname]</h1>
	</div>
<!--left-column ID style is floated left and used for navigation-->
	<div id="left-column">
		<h3>Links...</h3>
		<ul>
		<li> <a href="http://www.w3schools.com/">Reference: W3Schools</a></li>
		<li> <a href="feedback.html">Feedback Form</a></li>
		<li> <a href="video.html">Video</a></li>
		</ul>
<!--right-column ID style is floated right and used for content-->
	</div>
	<div id="right-column">
		<h2>Right Column Heading Here </h2>
		<p>Right column content here </p>
			<div class="box"><p>Box content</p></div>
			<div class="box"><p>Box content</p></div>
			<div class="box"><p>Box content</p></div>
			<div class="box"><p>Box content</p></div>
			<div class="box"><p>Box content</p></div>
			<div class="box"><p>Box content</p></div>
	</div>
<!--The clear class style clears (removes) float-->
	<div class="clear"></div>
	<div id="footer">
		<h5>Site by [your class nickname]</h5>
	</div>
</div>
</body>
</html>

Everything that visitors will see in our Web page (other than the title, which appears in a browser title bar) is defined in the <body> element.

Tag? Element? What's the Difference?

Most HTML elements (like the body element) are inside an open and close tag. So the body element is anything in between the <body> tag and the </body> tag.

Quite often, people use "tag" to refer to an HTML element. And in this course, I sometimes call an element a tag as well. That's not carelessness on my part. It's often less confusing to refer to HTML tags simply because the word "element" has wider meaning—as in "elements of style," "design elements," and so on. When necessary for clarity in this course, I'll be careful to refer to an HTML element, but often I'll simply call an element a tag.

Inside the <body> element, all of the page content is inside a div tag with an ID selector we named "wrapper." In this case, the div tag that contains all our page content is the "wrapper ID div" for short. By itself, the div tag has no display properties. It takes its "shape"—its width, height, and other attributes—from the ID style associated with it.

Understanding ID Div Tag and Class Div Tag Styles

Within the wrapper div, you can see these features:

• A banner ID div tag at the top of the page
• Left-column and right-column div tags that are floated (aligned) left and right respectively
• A footer div tag at the bottom of the page

You use ID div tags for elements that occur only once on a page. They're appropriate for our wrapper, our banner, our two columns, and our footer. But they aren't appropriate for the six boxes in the right column.

Those six boxes are identical in shape, so we need a style that we can assign to multiple divs on the page. In our model, that's the box class style. You can see that style applied to six div tags. It looks like this:

<div class="box"><p>Box content</p></div>

Div tag boxes have replaced tables for page layout. One of the reasons for this replacement is that you can use something called CSS pseudo-classes to animate class styles. You'll see how that's done in Chapter 4, when we deconstruct the CSS for our project. But before we do, I want to draw your attention to the div element with the clear class style.

Here's the line of code I'm referring to.

  <div class="clear"></div>

This div tag "ends" the floating that would otherwise be inherited from (in other words, continue from) the floated boxes that precede it.

Looking at Other Links and Lists

We have other HTML tags in our model, including links (<a>), unordered lists of bullets rather than numbers (<ul>), and list items (<li>). Put them all together, and they look like this:

           <ul> <li> <a href="http://www.w3schools.com/">Reference: W3Schools</a></li>

Confused? Let's Talk.

Your background with HTML, the substantial comments in the model, and the links I provide in the Supplementary Material should help you fill in whatever blanks exist in interpreting the HTML code in our model. But I strongly encourage you to post any questions you have in the Discussion Area for this lesson. No question is too simple, and any question you post will be an opportunity for me to riff about HTML code . . . and if nothing else, that'll be fun for me! More important, your classmates will learn as well.

A disclaimer of sorts: Even though I've shown you a "model" HTML template, that doesn't mean you have to design all your pages this way. You could use plenty of other techniques. But the overall approach and specific code I've given you provide a useful starting point for creating basic HTML pages.

Let's move on to Chapter 4, where you'll find out more about CSS.

Surveying Basic CSS3 Styles

We've completed our whirlwind tour of a basic HTML5 page, so let's create and deconstruct the CSS3 that goes with it. CSS stands for Cascading Style Sheets, a language that lets you control the look and formatting of your Web pages.

If you're working along with me here, copy the following code into a new file in your code editor, and save it as style.css in the same folder in which you saved your HTML file.

@charset "UTF-8";
/* CSS Document */

/* The body tag style applies to all elements on the page */
body {
background-color: black;
font-family: Verdana, Geneva, Arial, sans-serif;
padding:0px;
margin:0px;
}

/* The wrapper ID style is used with a div tag to provide a 960px wide page */
#wrapper {
width: 960px;
height: 800px;
margin-left: auto;
margin-right: auto;
background-color:LightSlateGrey ;
}

/* The right-column ID style is floated right */
#right-column {
float: right;
width: 600px;
height: 600px;
background-color:LightGray;
}

/* The left-column ID style is floated left */
#left-column {
float: left;
width: 360px;
background-color:silver;
height:600px;
}

/* Defining a style for a set of tags separated by commas applies the style to all tags */
h1,h2,h3,h4,h5,h6,p,li {
margin-left:15px;
}

#footer {
height:80px;
}

#banner{
height:120px;
background-color:SlateGrey;
}

/* Defining a style for a set of tags not separated by commas applies the style only to all tags within the preceding tag*/
#banner h1 {
color: white;
}

/* Advanced Web design relies on class or ID styles, never tables */
.box {
height: 150px;
width: 150px;
float: left;
background-color:tan;
margin: 15px;
opacity:.5;
}

/* The following pseudo-class applies to the box class when in a hovered state */
.box:hover {
background-color:white;
opacity:1;
}

/* This clear class style terminates float */
.clear{ 
clear: both; 
}

Let's walk through this code and note key techniques.

I opened this file with @charset "UTF-8";. The UTF-8 character set is important in HTML files because it allows browsers to interpret characters and symbols from a wide range of alphabets. I've never found a definitive argument that you need that for a style sheet file, but it doesn't cost anything to add that line of code, and everyone does it. So I do as well.

I've also added extensive comments to this file. Comments in CSS3 look like this: /* CSS Document */.

Styles for Tags

The most important style definition in a CSS3 file is usually for the <body> tag. That's because everything on the page that displays in a browser window goes inside the <body> and </body> tags—in other words, within the <body> element.

Like all CSS3 style definitions, the one for the <body> element opens with the name of the element followed by a left curly bracket character, which looks like this: {. And the style definition closes with a right curly bracket: }.

Individual styles within a style sheet are called selectors or rules. For example, if you create a style for the <h1> style, that's a selector. If you create a class style called ".box" (class styles always begin with a "."), that too is a selector. Creating a style for the <body> tag is also a selector. You're starting to see a pattern here, right?

Selectors consist of declarations, which are made up of properties and values. Take a look at this example:

h1 {

color:red;

background-color:yellow;

}

This selector is for the <h1> element. It has two declarations: one for text color and one for background color. Each of those declarations has two parts: a property and a value. In the first declaration in our example, the property is color, and the value is red. In the second declaration, the property is background-color, and the value is yellow.

h1 {

color:red;

background-color:yellow;

}

Use a colon to separate the two parts of every declaration. Another way to put that is: Separate the property (such as background-color) and value (such as black) with a colon.

The Supplementary Material for this lesson includes a link to a basic CSS tutorial. You can use that resource to explore a full set of CSS3 properties and values. And don't forget—you can post questions about CSS3 rules in the Discussion Area!

Let's zoom in on a few specific CSS3 techniques that might be new to you.

Defining a Wrapper

Our #wrapper ID style, which defines the div tag box that wraps our entire page content, is 960 pixels (px) wide. A pixel, which is short for "picture element," is a single point within an image.

The 960-pixel width has become the standard in all professional Web design workflows. See the Supplementary Material for information on the 960 grid.

This width works well in all desktop and laptop viewports (monitor sizes) and in many tablet viewports. And the number 960 is easily divisible into columns of two, three, six, and so on. That makes it easy to design artwork, create wireframes (sketches) of column layout, and prepare photos and video for the Web. You'll see how all this works as we add content in later lessons.

Applying Float

I mentioned earlier that our right and left columns have float properties (with values of right and left respectively). By default, most HTML elements take up a whole line or row of a page. Defining a left or right float changes that and allows content to flow around a box.

It's often necessary to define a class style that will clear, or remove, any inherited float properties so that elements on a page revert to filling an entire row. That's necessary in our model after the boxes end and before the footer style is applied to a div tag. So our CSS style sheet includes this style, which clears any float properties:

.clear{

clear: both;

}

Using Multiple Styles and Compound Styles

Next I want to focus on the two style definitions that apply to more than one style. One of those defines a property and value for all six heading levels, the paragraph tag, and the list tag:

h1,h2,h3,h4,h5,h6,p,li {

margin-left:15px;

}

See the commas between the elements in this style rule? That means we're dealing with a multiple style—one that applies to all these elements. This particular multiple style applies a margin that separates the left side of each of these elements from the border of whatever box encloses it.

On the other hand, when we list elements in a style definition without commas between them, we create a compound style—one that applies only when the last element is enclosed inside all the elements listed before it. For example, the following style definition displays (text) color as white for the h1 element, but only when that element is inside a #banner ID.

#banner h1 {

color: white;

}

In other words, the heading text will be white inside the banner but not outside the banner.

Our model has an <h1> element in the banner (with the text "Website for [your class nickname]"). If we add an <h1> element to the right column in our model, for example, that element won't adopt the style definition for an <h1> tag that appears inside a #banner style element.

<h1> element content inside and outside the banner

See how "Website for [your class nickname]" is white but "Heading 1 Here" is black? That's because we're using a compound style.

The ID styles in our style sheet, like the #banner style, begin with the # symbol in our CSS file. Remember that you can use a particular ID style only once in any single HTML file. Class styles, which you can use repeatedly in an HTML file, begin with "." You can see this in the .box class style that defines the small boxes in the right column of our page.

Pseudo-class styles apply to an element only in a specific state of user activity, like when a user clicks on or hovers his or her mouse over an element. In our model, a pseudo-class changes how our .box class style displays when in a hovered state:

.box:hover {

background-color:white;

opacity:1;

}

Defining Opacity

One last thing before we close this compressed survey of a sample CSS file. Note that the pseudo-class style defines the opacity property for the box in its normal state and in a hovered state.

Changing the background color and opacity of a hovered box

If you have 100% opacity, or opacity with a value of 1, you get an opaque box. At the other end of the scale, 0% opacity (a value of 0) defines a transparent box. What about an opacity value of 50% or .5? That defines a box that's halfway transparent (or halfway opaque—it's the same thing).

In a normal state (when not hovered over), the box displays with 50% opacity (or a value of .5). That property and value "dim" the boxes by making them semi-transparent. But when a user hovers his or her cursor over the box, the opacity changes to 100%. That makes the box "pop" when someone hovers over it.

What did you think of our whirlwind tour? Please join me in Chapter 5 for a summary.

Summary

How well do you understand the code we used in this lesson? Test your knowledge with this matching game.

How'd you do? Was it obvious which examples were from HTML5 and which were from CSS3?

If you hung with me throughout this lesson, you created a Web page that has the kinds of features available using intermediate HTML5 and CSS3 skills. Your new page has a linked style sheet that allows you to include sophisticated commands, such as changing a box's opacity depending on where the user's cursor is.

Throughout this course, we'll build on the basic CSS3 techniques we surveyed in this lesson. Are you feeling overwhelmed by what we've surveyed? Don't worry. Over the next several weeks, you'll learn to manage CSS3 styling.

If everything covered here is old news to you, again—don't worry. There's plenty more to come! And if you're a CSS3 expert who approaches some of the challenges of styling pages differently from how I do it, that's fine. In fact, I'd appreciate it if you'd post your insights and approaches in the Discussion Area for this lesson where they diverge from my approach.

In the next lesson, we'll liven up our site with custom color schemes. Also, I'll show you how to procure a Web hosting service—free! You'll upload your files to that server, and we'll all be able to see them live on the Web.